<template>
    <view>
        <view class="pt-30"></view>
        <view class="user br-24">
            <hj-login v-if="!token" @init="handleInit">
                <view class="user-info w100 align-center p-30 pt-24 pb-24">
                    <hj-image
                        src="noToken-01.png"
                        :height="iconSize"
                        :width="iconSize"
                        mode="aspectFill"
                    />
                    <view class="ft-36 bold t-3 pl-20 flex-auto text-left">点击登录</view>
                </view>
            </hj-login>
            <view v-else class="user-info w100 align-center p-30 pt-24 pb-24">
                <hj-avatar-up @init="upAvatar">
                    <hj-image
                        v-if="userInfo.avatar"
                        :img="userInfo.avatar"
                        :height="iconSize"
                        :width="iconSize"
                        mode="aspectFill"
                        radius="100%"
                    />
                    <hj-image
                        v-else
                        src="noToken-01.png"
                        :height="iconSize"
                        :width="iconSize"
                        mode="aspectFit"
                    />
                </hj-avatar-up>
                <view class="pl-20 flex-auto text-left">
                    <input
                        v-model="nickname"
                        type="nickname"
                        class="ft-36 bold t-3 text-over-1 name"
                        placeholder="微信用户"
                        @blur="handleBlur"
                        @input="handleInput"
                    />
                    <view class="ft-28 t-9 mt-20 mb-2 line-height1">
                        {{ userInfo.mobile || '15526450310' }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 用户信息
 * @author yinzhi
 * @date 2025-05
 */
import { ref, defineComponent, computed } from 'vue'
defineComponent({
    name: 'UserInfo'
})
import { useStore } from 'vuex'
import { updateUserInfo, getUserInfo } from '@/libs/api/baseApi.js'
const store = useStore()
const token = computed(() => store.state.auth.token || '')
const userInfo = computed(() => store.state.platform.userInfo || '')
const nickname = ref(userInfo.value.nickname || '微信用户')
// 图标尺寸
const iconSize = ref('140rpx')

const emit = defineEmits(['init'])

const handleInit = () => {
    emit('init')
}

// 输入框输入时，更新用户名称
const handleInput = e => {
    nickname.value = e.target.value
    if (!e.target.cursor) {
        handleBlur()
    }
}
// 输入框失去焦点时，更新用户名称
const handleBlur = async () => {
    if (nickname.value !== userInfo.value.nickname && nickname.value) {
        try {
            console.log(nickname.value)
            await updateUserInfo({
                nickname: nickname.value || ''
            })
            await getInfo()
        } catch (error) {
            logger.error('[updateUserInfo] 更新用户信息失败: ', error)
        }
    }
}

// 上传头像
const upAvatar = async src => {
    if (!src) {
        return
    }
    try {
        await updateUserInfo({
            avatar: src || ''
        })
        await getInfo()
    } catch (error) {
        logger.error('[updateUserInfo] 更新用户信息失败: ', error)
    }
}

// 更新接口
const getInfo = async () => {
    try {
        const data = await getUserInfo()
        store.commit('platform/setUserInfo', data)
    } catch (error) {
        logger.error('[getUserInfo] 获取用户信息失败: ', error)
    }
}
</script>

<style scoped lang="scss">
.user {
    background: $uni-bg-color;
    box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.08);
    &-info {
        position: relative;
        .name {
            height: 40rpx;
        }
    }
}
</style>
